<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8" />
    <title>问题列表</title>
    <link rel="stylesheet" href="css/yueke.css">
    <link rel="stylesheet" href="ubox/ubox.css">
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="underscore/underscore-min.js"></script>
    <script type="text/javascript" src="js/list_more.js"></script>
    <script type="text/javascript" src="js/fixation.js"></script>
    <script type="text/javascript" src="js/md5.js"></script>
    <script type="text/javascript" src="ubox/ubox.js"></script>
</head>
<body class="background_grey">
    <div class="header">
        <div class="header_in">
            <div class="header_logo">
                <h1></h1>
                <img src="images/index_log.jpg" />
            </div>
            <div class="header_nav">
                <ul>
                    <li><a href="model_news_list.html">前沿资讯</a></li>
                    <li><a href="model_problem_list.html">互动问答</a></li>
                    <li><a href="model_personage_center.html">帮助中心</a></li>
                </ul>
            </div>
            <div class="header_info">
                <div class="header_info_find"><a href="#">寻找合作伙伴</a></div>
                <div class="header_register">
                    <a href="#">登录</a>|
                    <a href="#">注册</a>
                </div>
                <div class="header_become">
                    <a href="#">成为我们的专家</a>
                </div>
            </div>
            <div class="clear_both"></div>
        </div>
    </div>
    <div class="problem_list">
        <div class="problem_list_left">
            <div class="problem_list_left_list">
                <div class="problem_list_left_list_title">
                    <div class="problem_list_left_list_title_title">
                        <span>回答问题</span>
                    </div>
                    <div class="problem_list_left_list_title_tag">
                        <ol>
                            <li class="active">
                                热门问答
                            </li>
                            <li>
                                热门问答
                            </li>
                            <li>
                                热门问答
                            </li>
                            <li>
                                热门问答
                            </li>
                            <li>
                                热门问答
                            </li>
                            <li>
                                热门问答
                            </li>
                        </ol>
                        <span>更多分类</span>
                    </div>
                </div>
                <ul id="problem_list">
                    <!-- <li class="problem_list_left_item">
                        <a href="#1">
                            <div class="problem_list_left_item_problem">
                                <div class="problem_detail_left_title">
                                    <div class="problem_detail_left_title_keyword">
                                        <div class="problem_detail_left_title_person"><img src="images/problem_list_img1.jpg" alt="" /></div>
                                        <div class="problem_detail_left_title_in">
                                            <h2>用户运营，产品运营，社区运营，活动运营到底是个什么关系？</h2>
                                            <p><span>朱善大</span><i>（<span>中医院院士</span>）</i> 回答了问题</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="problem_list_left_item_answer problem_list_margin">
                                <div class="problem_detail_left_item_info">
                                    <span>所属标签：</span>   
                                    <span class="number">13,240个关注</span>
                                    <span class="answer"><i>190</i>个回答</span> 
                                </div>
                            </div>
                        </a>
                    </li>
                    <li class="problem_list_left_item">
                        <a href="#2">
                            <div class="problem_list_left_item_problem">
                                <div class="problem_detail_left_title">
                                    <div class="problem_detail_left_title_keyword">
                                        <div class="problem_detail_left_title_person"><img src="images/problem_list_img1.jpg" alt="" /></div>
                                        <div class="problem_detail_left_title_in">
                                            <h2>用户运营，产品运营，社区运营，活动运营到底是个什么关系？</h2>
                                            <p><span>朱善大</span><i>（<span>中医院院士</span>）</i> 回答了问题</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="problem_list_left_item_answer problem_list_margin">
                                <div class="problem_detail_left_item_info">
                                    <span>所属标签：</span>   
                                    <span class="number">13,240个关注</span>
                                    <span class="answer"><i>190</i>个回答</span> 
                                </div>
                            </div>
                        </a>
                    </li> -->
                    
                </ul>
            </div>
            <div class="problem_load_more_outer">
                <div class="problem_load_more" id="moreBt">
                    加载更多
                </div>
            </div>
        </div>
        <div class="problem_detail_right" id="fixed_right">
            <div class="problem_detail_right_top">
                <div class="problem_detail_right_btn" id="put_questions">我要提问</div>
                <div class="problem_detail_right_btn blue">回答问题</div>
            </div>
            <div class="problem_detail_right_bottom">
                <ul class="problem_detail_right_bottom_list">
                    <li class="item1"><a href="#">我的提问</a></li>
                    <li class="item2"><a href="#">我的回答</a></li>
                    <li class="item3"><a href="#">我关注的问题</a></li>
                    <li class="item4"><a href="#">我喜欢的回答</a></li>
                </ul>
            </div>
        </div>
    </div>
    <div class="index_link">
        <div class="index_link_in"></div>
    </div>
    <div class="index_footer">
        <div class="index_footer_link">
            <a href="">新闻公告</a>|
            <a href="">关于我们</a>|
            <a href="">联系我们</a>|
            <a href="">用户协议</a>
        </div>
        <p class="index_footer_copy">Copyright©2016 yk-zb.com 粤科众包 版权所有 粤ICP备16027165号-1</p>
    </div>
    <div class="shadow">
        <div class="problem_shadow">
            <div class="problem_shadow_title"> 
                我要提问<span>X</span>
            </div>
            <div class="problem_shadow_main">
                <input type="text" placeholder="写下你的问题" class="problem_shadow_ipt"/>
                <p>问题描述（选填）：</p>
                <textarea name="" id="" cols="30" rows="10" placeholder="请填写问题的详细描述···" class="problem_shadow_textarea"></textarea>
                <p>选择标签：</p>
                <select name="" id="" class="problem_shadow_select">
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                </select>
                <div class="problem_shadow_btn">
                    <span class="publish" id="btn_publish">发布</span>
                    <span class="abolish" id="btn_abolish">取消</span>
                </div>
            </div>
        </div>
    </div>
    <script id="problemItem" type="text/template">
        <li class="problem_list_left_item" questions_id="<#= questionsId #>" pub_date="<#= pubDate #>" user_id="<#= userBase.userId #>">
            <a href="#">
                <div class="problem_list_left_item_problem">
                    <div class="problem_detail_left_title">
                        <div class="problem_detail_left_title_keyword">
                            <div class="problem_detail_left_title_person"><img src="<#= userBase.headImgUrl #>" alt="" /></div>
                            <div class="problem_detail_left_title_in">
                                <h2><#= title #></h2>
                                <p><span><#= userBase.nickname #></span><i>（<span><#= name #></span>）</i> 回答了问题</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="problem_list_left_item_answer problem_list_margin">
                    <div class="problem_detail_left_item_info">
                    <div class="problem_detail_left_item_info">
                        <span>所属标签：</span>   
                        <span class="number"><#= focusNum #>个关注</span>
                        <span class="answer"><i><#= answerNum #></i>个回答</span> 
                    </div>
                </div>
            </a>
        </li>
    </script>
</body>
</html>
<script type="text/javascript">
    $(function() {

        (function fnPaging(){
            encryptMd5.data = {
                lastId : 0,
                pageSize : 5 
            }
            sMd5 = encryptMd5.fnData();
            console.log(sMd5);
            var pages = 5 ;    //分页总页数
            var page = 1;
            var id = 2;
            /*加载数据*/
            function loadmore() {
                var rnd = parseInt(Math.random()*1000+1);
                /*          //alert("currentPage=" + page + ",totalePage=" + pages);
                var url=" " + "/" + page;//页面
                var json = {
                    id : id ,
                    time : '2016-05-23 21:09',
                    url_img : 'images/problem_list_img2.jpg',
                    title : '云服务为什么需要配备1对1队告诉你',
                    detail : '网易云信全新推出T服务，独创1对1技术顾问实时响应创1对1技术顾问实时响应创1对1创1对1技术顾问实时响应创1对1技术顾问实时响应创1对1创1对1技术顾问实时响应创1对1技术顾问实时响应创1对1创1对1技术顾问实时响应创1对1技术顾问实时响应创1对1创1对1技术顾问实时响应创1对1技术顾问实时响应创1对1创1对1技术顾问实时响应创1对1技术顾问实时响应创1对1创1对1技术顾问实时响应创1对1技术顾问实时响应创1对1创1对1技术顾问实时响应创1对1技术顾问实时响应创1对1创1对1技术顾问实时响应创1对1技术顾问实时响应创1对1创1对1技术顾问实时响应创1对1技术顾问实时响应创1对1技术顾问实时响应解决每个技术难题，让你不再惧怕上云',
                    person1 : '但是对方是否',
                    person2 : '第三方多三' ,
                    num1 : '1235dsfs',
                    num2 : '12352222',
                    num3 : '12356'
                }
                var t = _.template($("#problemItem").text());
                var htmlTxt = t(json);
                $('#problem_list').append(htmlTxt);
                // console.log(json)
            // console.log(t,htmlTxt)*/
                $.ajax({
                        type: "get",
                        url: 'http://192.168.100.219:6071/json/questionsList',
                        data:sMd5,
                        rnd: rnd,
                        dataType: "json",
                        success: function(result) {
                                console.log(result)
                                var list = result.data;
                                      //每次都返回总页数
                                      // pages = result.data.page_size;
                                      console.log(list);
                                      for(var i = 0; i < list.length; i++){
                                            var order_item = list[i];
                                            console.log(order_item);
                                            var t = _.template($("#problemItem").text());
                                            var htmlTxt = t(order_item);

                                            $('#problem_list').append(htmlTxt);
                                      }
                                /*if(result.code == 0){
                                      var list = result.data.order_list;
                                      //每次都返回总页数
                                      pages = result.data.page_size;
                                      console.log(result.data);
                                      for(var i = 0; i < list.length; i++){
                                            var order_item = list[i];
                                            console.log(order_item);
                                            var t = _.template($("#problemItem").text());
                                            var htmlTxt = t(order_item);

                                            $('#problem_list').append(htmlTxt);
                                      }
                                      if (page >= pages){
                                              $("#moreBt").html('没有更多');
                                      }
                                }else{
                                          UBox.show('加载失败', -1);
                                }*/
                        }
                  });
                };
                loadmore();
                /*加载更多*/
                $("#moreBt").click(function(event) {
                    if(page >= pages){
                        $("#moreBt").html('没有更多');
                        return false;
                    }else{
                         page++;
                         id++;
                    }
                    loadmore();
                });
        })();
        //banner 轮播
        (function fnBanner(){
            var iWinWidth = $(window).width();
            var iNum = $('#index_banner li').length;
            var iCirWidth = $('#index_circle li').width()*iNum + 22*(iNum - 1);
            var indexOld = 0;
            $('#index_banner li').css('width',iWinWidth+'px');
            $('#index_circle').css({"width":iCirWidth + "px","margin-left":-iCirWidth/2 + "px"});
            $('#index_banner').css({"width":iWinWidth * iNum + "px"});
            if(iNum <= 1){
                $('#index_circle').hide();
                $('#index_next').hide();
                $('#index_prev').hide();
            }
            $('#index_next').click(function(event) {
                if(indexOld >= 2){
                    return;
                }
                indexOld++;
                console.log(indexOld);
                $('#index_circle li').removeClass('active');
                $('#index_circle li').eq(indexOld).addClass('active');
                $('#index_banner').animate({"left":-iWinWidth * indexOld + "px"}, 200);
            });
            $('#index_prev').click(function(event) {
                if(indexOld == 0){
                    return;
                }
                indexOld--;
                console.log(indexOld);
                $('#index_circle li').removeClass('active');
                $('#index_circle li').eq(indexOld).addClass('active');
                $('#index_banner').animate({"left":-iWinWidth * indexOld + "px"}, 200);
            });
            $('#index_circle li').click(function(event) {
                indexOld = $('#index_circle li').index(this);
                $('#index_circle li').removeClass('active');
                $('#index_circle li').eq(indexOld).addClass('active');
                $('#index_banner').animate({"left":-iWinWidth * indexOld + "px"}, 200);
            });
        })();
        /*我要提问*/
        $('#put_questions').click(function(event) {
            $('.shadow').fadeIn();
            $('.problem_shadow').fadeIn();
            return false;
        });
        $('.problem_shadow_title span').click(function(event) {
            $('.shadow').fadeOut();
            $('.problem_shadow').fadeOut();
        });
        $('#btn_publish').click(function(event) {
            var ipt = $('.problem_shadow_ipt').val();
            var txta = $('.problem_shadow_textarea').val();
            var select = $('.problem_shadow_select').val();
            if(ipt == '' || txta == '' || select == ''){
                return false;
            }
            encryptMd5.data = {
                describe : txta ,
                pid : 60,
                title : ipt,
                token : '6311aa481a362c65def777fd133756d8'
            }
            console.log(encryptMd5.fnMd5());
            sMd5 = encryptMd5.fnData()
            console.log(ipt,txta,select);
            $.ajax({
                  type: "POST",
                  url: 'http://192.168.100.219:6071/json/pubQuestions',   //提交地址     
                  data : sMd5,    
                  dataType: "json",
                  success: function(data){
                        console.log(data);
                        },
                  error: function(data){
                                
                        }
            });
        });
        $('#btn_abolish').click(function(event) {
            $('.shadow').fadeOut(200,function(){
                $('.problem_shadow_ipt').val('');
                $('.problem_shadow_textarea').val('');
                $('.problem_shadow_select').val('');
            });
        });
    });
</script>